<template>
  <view class="flex-col tab-bar">
    <view class="flex-row justify-between items-start">
      <view class="flex-col justify-start relative group_2">
        <view class="section"></view>
        <image class="image_4 pos" src />
      </view>
      <view class="flex-row group">
        <image class="image" src />
      </view>
    </view>
    <view class="flex-row items-center relative group_3">
      <image class="image" src />
      <text class="text ml-131">测试</text>
    </view>
    <view class="container" style="border-radius: 0 39.86rpx 39.86rpx 0; margin-top: 40rpx">
      <!-- 这个box仅仅是为了计算高度 -->
      <view class="box">
        <!-- <view class="title" v-if="t != 'ios'">
        <view>
          <view style="font-size: 35rpx; font-weight: 800; padding-bottom: 10rpx">测试题库</view>
        </view>
        </view>-->

        <view class="card">
          <!-- <view class="card-list">
          <text class="card-text">全部练习</text>

          </view>-->
          <view
            class="flex-row justify-between items-center self-center section_4"
            style="margin-bottom: 30rpx"
          >
            <text class="text_2">测试题库</text>
          </view>
          <view
            class="flex-row justify-between items-center self-center section_4"
            @tap="getSection"
          >
            <text class="text_2">全部练习</text>
            <image
              src="https://haoyigou-1318705369.cos.ap-guangzhou.myqcloud.com/%E5%8F%B3.png"
              style="width: 50rpx;height:50rpx"
              mode="scaleToFill"
            />
          </view>
        </view>

        <!-- vip知识讲解 -->
        <view class="flex-col mt-16 list-item section_6">
          <view class="flex-col self-start relative group_6" @tap="zhishi">
            <view class="self-start section_5"></view>
            <view class="flex-row justify-between self-stretch group_7">
              <text class="self-start font text_3">知识点讲解</text>
              <image class="self-center image" src="https://haoyigou-1318705369.cos.ap-guangzhou.myqcloud.com/vipp.png" />
            </view>
          </view>

          <view class="card-list1">
            <view class="biankuai1" @tap="zhishi">
              <text
                class="self-start font_2 text_4"
                style="margin-top: 40rpx; margin-left: 110rpx"
              >集合的含义与表示</text>
            </view>
            <view class="biankuai2" style="margin-top: 50rpx">
              <view
                style="
                  margin-left: auto;
                  height: 50%;
                  display: flex;
                  justify-content: space-between;
                  width: 600rpx;
                "
                v-for="(item, index) in spinglist"
                :key="index"
                @tap="bofang(item)"
              >
                <text style="width: 100%">
                  <text class="icon iconfont icon-shipin" style="margin-right: 20rpx"></text>
                  <text class="ml-10 font_3 text_5">{{ item.title }}</text>
                </text>
                <video
                  :src="proxy.$baseUrl + item.sping_url"
                  id="myVideo"
                  style="width: 0rpx; height: 0rpx; border-radius: 8rpx; margin-right: 20rpx"
                  :poster="proxy.$baseUrl + item.titlepic"
                  @loadedmetadata="videoTimeUpdateEvent"
                  :show-center-play-btn="false"
                  :show-fullscreen-btn="false"
                ></video>
                <text
                  style="margin-right: 20rpx; color: #999; font-size: 24rpx"
                >{{ zhonshichang1[zhonshichang1.length - 2 - index] }}</text>
              </view>
            </view>
            <view class="flex-col group_9" style="position: relative; left: 580rpx; top: -150rpx">
              <view class="self-stretch section_7"></view>
              <view class="mt-20 self-end section_8"></view>
            </view>
          </view>
        </view>

        <!-- vip知识讲解 -->
        <view class="flex-col mt-16 list-item section_6">
          <view class="flex-col self-start relative group_6" @tap="zhishi">
            <view class="self-start section_5"></view>
            <view class="flex-row justify-between self-stretch group_7">
              <text class="self-start font text_3">试卷下载</text>
              <image class="self-center image" src="https://haoyigou-1318705369.cos.ap-guangzhou.myqcloud.com/vipp.png" />
            </view>
          </view>

          <view class="card-list1">
            <view class="biankuai2" style="margin-top: 50rpx">
                  <!-- vip试卷下载 -->
              <view class="card-list2">
                <view
                  style="height: 50%; width: 100%;  border-radius: 20rpx"
                  v-for="(item, index) in wenlist"
                  :key="index"
                  @tap="wenjian(item)"
                >
                  <view style="width: 85%; margin-left: 6%; margin-top: 5%">
                    {{
                    item.wenjianming
                    }}
                  </view>
                </view>
              </view>
            </view>
            <view class="flex-col group_9" style="position: relative; left: 580rpx; top: -90rpx">
              <view class="self-stretch section_7"></view>
              <view class="mt-20 self-end section_8"></view>
            </view>
          </view>
        </view>
      </view>


      <uniPopup type="bottom" background-color="#fff" ref="popup1">
        <view class="popup" style="margin: 10rpx" :style="{ height: scroll_view_height + 'px' }">
          <view style="text-align: center; padding: 10rpx">{{ section_title }}</view>
          <view style="padding: 10rpx">
            <scroll-view
              scroll-y
              style="border-top: 1px solid #f2f2f2"
              :style="{ height: scroll_view_height - 40 + 'px' }"
            >
              <view
                v-for="(item, index) in section"
                :key="index"
                style="
                  display: flex;
                  border-bottom: 1px solid #f2f2f2;
                  padding: 10rpx;
                  align-items: center;
                  justify-content: space-between;
                  min-height: 100rpx;
                "
              >
                <view style="max-width: 50%">{{ item.mingchen }}</view>

                <view>
                  <button
                    shape="circle"
                    size="mini"
                    type="primary"
                    plain
                    @click="goPractice(item)"
                  >进入学习</button>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </uniPopup>
    </view>
  </view>
</template>

<script lang="ts" setup>
import uniPopup from '../../components/components/uni-popup/uni-popup.vue'
// import uGap from '../../components/vk-uview-ui_1.5.2/components/u-gap/u-gap.vue'
import { getGrade, getTest, getFilell1 } from '../../services/kaosi'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import { reactive, ref, toRefs,getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any
const nianji1 = ShouyeStore()
const showModel = ref(false)
const spinglist = ref<any>([])
const show = ref(false)
const scroll_view_height = ref(400)
const section = ref<any>([
  { name: '高中语文', count: 100 },
  { name: '高中数学', count: 100 },
  { name: '高中英语', count: 100 },
  { name: '高中化学', count: 100 },
  { name: '高中物理', count: 100 },
])
const section_title = ref('课程选择')
const popup1 = ref<any>(null)
const getSection = () => {
  console.log('触发了')

  popup1.value.open()
}
const wenlist = ref<any>([])
// 获取年级数据
onLoad(async (e: any) => {
  let res = await getGrade(nianji1.nianji)
  console.log(res, 'nianji')
  section.value = res.data
  let res1 = await getTest({ nianji: nianji1.nianji })
  console.log(res1, 'ddd')
  spinglist.value = res1.data
  // uni.hideLoading();
  console.log(spinglist.value, '234234')
  let res2 = await getFilell1({ nianji: nianji1.nianji })
  console.log(res2, 'aaa')
  wenlist.value = res2.data
})
// 计算时间总时长
const formatTime1 = (seconds: any) => {
  // 计算小时、分钟和秒
  var hours = Math.floor(seconds / 3600)
  var minutes = Math.floor((seconds % 3600) / 60)
  var remainingSeconds = Math.floor(seconds % 60)

  // 格式化为“00:00”的形式
  var formattedTime =
    (hours < 10 ? '0' : '') +
    hours +
    ':' +
    (minutes < 10 ? '0' : '') +
    minutes +
    ':' +
    (remainingSeconds < 10 ? '0' : '') +
    remainingSeconds

  return formattedTime
}
const zhonshichang = ref<any>('')
const zhonshichang1 = ref<any>([])
const videoTimeUpdateEvent = (e) => {
  console.log(e, '2')

  zhonshichang.value = Number(e.detail.duration)
  console.log(zhonshichang.value, 'ddd')
  // if (index == 0) {
  zhonshichang1.value.push(formatTime1(zhonshichang.value))
  // } else {
  //   zhonshichang2.value.push(formatTime1(zhonshichang.value))
  //   zhonshichang1.value = zhonshichang2.value
  // }

  console.log(zhonshichang1.value, 'ddd1')
}
const goPractice = (item) => {
  uni.navigateTo({
    url: '../../pagesB/cheshi_detail/index?item=' + JSON.stringify(item),
  })
}
const zhishi = () => {
  uni.navigateTo({
    url: '../../pagesB/huiyuanzhuanqu/index',
  })
}
// 播放
const bofang = (item) => {
  console.log(item, '1232')
  //  跳转
  uni.showModal({
    title: item.title,
    content: '确认要播放该视频吗',
    confirmText: '播放',
    success: (res) => {
      if (res.confirm) {
        // 转到下载页面
        uni.navigateTo({
          url:
            '../../pagesB/sy_sping/index?mingchen=' +
            item.title +
            '&kechen=' +
            item.kechen +
            '&nianji=' +
            item.nianji,
        })
      }
    },
  })
}

const wenjian = (item) => {
  // 提示预览吗
  uni.showModal({
    title: item.wenjianming,
    content: '确认要预览该文件吗',
    confirmText: '预览',
    success: (res) => {
      if (res.confirm) {
        const downloadTask = uni.downloadFile({
          url: item.wenjian, // 图片或者文件地址
          filePath: `${uni.env.USER_DATA_PATH}/${item.wenjianming}.docx`,
          success: function (res) {
            console.log('下载的res', res)
            var filePath = res.tempFilePath // 临时文件存储路径
            //  文件打开文件预览
            uni.openDocument({
              filePath: res.filePath,
              // fileType: 'pdf',
              success: function (res1) {
                console.log(res.filePath, '23123')
                uni.hideLoading()
                console.log('打开文档成功')
              },
              fail: function (err) {
                uni.hideLoading()
                uni.showToast({
                  title: '打开失败',
                  duration: 1500,
                  icon: 'none',
                })
                console.log('打开失败')
              },
            })
          },
          fail: function (err) {
            console.log('下载失败原因', err)
            uni.hideLoading()
            uni.showModal({
              title: '您需要授权相册权限',
              success(res) {
                if (res.confirm) {
                  uni.openSetting({
                    success(res) {},
                    fail(res) {
                      console.log(res)
                    },
                  })
                }
              },
            })
          },
        })
      }
    },
  })
}
</script>

<style lang="scss" scoped>
@import url('../../static/assets/wxss/iconfont.css');
.container {
  height: calc(100vh);
  background-color: #ffffff;

  padding-left: 20rpx;
  padding-right: 20rpx;

  .title {
    height: 200rpx;
    padding: 30rpx;
    background-image: linear-gradient(45deg, #1a76ff, #8fedf5);
    color: #ffffff;
    border-radius: 15rpx;
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card {
    background-color: #ffff;
    padding: 30rpx;
    font-size: 30rpx;
    border-radius: 15rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-flow: row wrap;

    .card-list {
      // 水平居中字体

      background-color: #f4f8ff;
      border-radius: 15rpx;
      width: 100%;
      height: 150rpx;
      padding: 25rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .card1 {
    width: 100%;
    height: 500rpx;

    //背景颜色变浅
    background-color: rgba(239, 237, 212, 0.5);
    // 背景图片变浅色一点

    padding: 30rpx;
    font-size: 30rpx;
    border-radius: 15rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-flow: row wrap;

    .card-list1 {
      margin-top: 50rpx;
      background-color: #f4f8ff;
      border-radius: 15rpx;
      width: 100%;
      height: 300rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
      // 换行
      flex-direction: column;
      // 方向垂直
    }
    .card-list2 {
      margin-top: 50rpx;

      border-radius: 15rpx;
      width: 100%;
      height: 340rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
      // 换行
      flex-direction: column;
      // 方向垂直
    }
  }

  .history {
    background: #fff;
    padding: 30rpx;
    border-radius: 15rpx;

    .history-header {
      display: flex;
      justify-content: space-between;
      margin: 0 20rpx 16rpx;
    }
  }
}
.card-text1 {
  position: relative;
  top: -25rpx;
}
.card-list1-item {
  padding: 10rpx 0;
  border-bottom: 1px solid #f2f2f2;
  width: 270rpx;
  height: 150rpx;
  background-color: #ded161;
  color: #e47f0b;
  // 圆润
  border-radius: 15rpx;
  position: relative;
  top: -35rpx;
  left: 0rpx;
  // 字体平分开来
  font-size: 30rpx;
  // 加粗
  font-weight: 600;
  text-align: center;
  // 垂直居中
  line-height: 130rpx;
}
.biankuai1 {
  display: flex;
  justify-content: space-between;
}
.biankuai2 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 50%;
}
//更新的
.ml-131 {
  margin-left: 237.32rpx;
}
.mt-27 {
  margin-top: 48.91rpx;
}
.mt-3 {
  margin-top: 5.43rpx;
}
.page {
  background-color: #ffffff;
  background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65eab6f85a7e3f0310d0dae8/65eab7a5ba406d00116040d9/17113561902473109104.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.tab-bar {
  padding-top: 14.49rpx;
  background-color: #2f2d51;
  overflow: hidden;
}
.group_2 {
  margin-top: 14.49rpx;
  padding-top: 16.3rpx;
  width: 199.28rpx;
}
.section {
  background-color: #ffffff0d;
  border-radius: 0rpx 181.16rpx 181.16rpx 0rpx;
  height: 57.97rpx;
}
.image_4 {
  width: 97.83rpx;
  height: 28.99rpx;
}
.pos {
  position: absolute;
  left: 25.36rpx;
  top: 0;
}
.group {
  margin-right: 21.74rpx;
}
.image {
  width: 60rpx;
  height: 60rpx;
}
.image_2 {
  margin-left: 25.36rpx;
}
.image_3 {
  margin-left: -9.06rpx;
}
.group_3 {
  margin-top: -7.25rpx;
  padding: 0 57.97rpx;
}
.text {
  color: #ffffff;
  font-size: 36.23rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 32.97rpx;
}
.group_4 {
  margin-top: 28.99rpx;
  padding: 10.87rpx 0 1380.43rpx;
}
.section_3 {
  background-color: #ffffff0d;
  border-radius: 155.8rpx 0rpx 0rpx 155.8rpx;
  width: 132.25rpx;
  height: 57.97rpx;
}
.section_2 {
  padding-top: 177.54rpx;
  background-color: #ffffff;
  border-radius: 0 39.86rpx 39.86rpx 0;
  height: 1449.28rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 6rpx;
  top: 0;
}
.section_4 {
  padding: 32.61rpx 28.99rpx 32.61rpx 50.72rpx;
  background-color: #e9e9ff;
  border-radius: 28.99rpx;
  width: 651.45rpx;
}
.text_2 {
  color: #4a44c6;
  font-size: 32.61rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 30rpx;
}
.group_5 {
  padding-top: 28.99rpx;
}
.list {
  margin-left: 39.86rpx;
  margin-right: 32.61rpx;
}
.list-item {
  margin-right: 7.25rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.section_6 {
  padding-bottom: 14.49rpx;
  background-color: #f4f4f6;
  border-radius: 28.99rpx;
  overflow: hidden;
  height: 400.96rpx;
}
.group_6 {
  margin-left: -39.86rpx;
  margin-top: -28.99rpx;
  width: 642.05rpx;
}
.section_5 {
  background-color: #e5e6eb;
  border-radius: 0 181.16rpx 181.16rpx 0;
  width: 184rpx;
  height: 57.97rpx;
}
.group_7 {
  padding-left: 76.09rpx;
}
.font {
  font-size: 43.48rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 40.04rpx;
}
.text_3 {
  margin-top: 25.36rpx;
  color: #000000c7;
}
.group_8 {
  padding-left: 21.74rpx;
}
.font_2 {
  font-size: 28.99rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 26.96rpx;
  color: #2f2d51;
}
.text_4 {
  margin-left: 10.87rpx;
}
.group_10 {
  margin-top: 36.23rpx;
}
.font_3 {
  font-size: 25.36rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 23.48rpx;
  color: #0000008f;
}
.text_5 {
  line-height: 23.7rpx;
}
.text_6 {
  line-height: 23.15rpx;
}
.group_9 {
  width: 130.43rpx;
}
.section_7 {
  background-color: #3e3c6d;
  border-radius: 155.8rpx 0rpx 0rpx 155.8rpx;
  height: 43.48rpx;
}
.section_8 {
  background-color: #e5e6eb;
  border-radius: 155.8rpx 0rpx 0rpx 155.8rpx;
  width: 86.96rpx;
  height: 43.48rpx;
}
.text_13 {
  color: #2f2d51;
  font-size: 25.36rpx;
  font-family: Gilroy-SemiBold;
  font-weight: 600;
  line-height: 18.53rpx;
  opacity: 0.5;
}
.pos_6 {
  position: absolute;
  left: 60rpx;
  bottom: 19.69rpx;
}
.pos_3 {
  position: absolute;
  left: 50%;
  bottom: 3.8rpx;
  transform: translateX(-50%);
}
.pos_4 {
  position: absolute;
  right: 199.26rpx;
  bottom: 3.8rpx;
}
.pos_5 {
  position: absolute;
  right: 79.26rpx;
  bottom: 0;
}
.section_13 {
  margin-top: -77.9rpx;
  background-color: #ffffff;
  height: 157.61rpx;
}
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

page {
  width: 100vw;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 3.62rpx;
}

.mt-2 {
  margin-top: 3.62rpx;
}

.ml-4 {
  margin-left: 7.25rpx;
}

.mt-4 {
  margin-top: 7.25rpx;
}

.ml-6 {
  margin-left: 10.87rpx;
}

.mt-6 {
  margin-top: 10.87rpx;
}

.ml-8 {
  margin-left: 14.49rpx;
}

.mt-8 {
  margin-top: 14.49rpx;
}

.ml-10 {
  margin-left: 18.12rpx;
}

.mt-10 {
  margin-top: 18.12rpx;
}

.ml-12 {
  margin-left: 21.74rpx;
}

.mt-12 {
  margin-top: 21.74rpx;
}

.ml-14 {
  margin-left: 25.36rpx;
}

.mt-14 {
  margin-top: 25.36rpx;
}

.ml-16 {
  margin-left: 28.99rpx;
}

.mt-16 {
  margin-top: 28.99rpx;
}

.ml-18 {
  margin-left: 32.61rpx;
}

.mt-18 {
  margin-top: 32.61rpx;
}

.ml-20 {
  margin-left: 36.23rpx;
}

.mt-20 {
  margin-top: 36.23rpx;
}

.ml-22 {
  margin-left: 39.86rpx;
}

.mt-22 {
  margin-top: 39.86rpx;
}

.ml-24 {
  margin-left: 43.48rpx;
}

.mt-24 {
  margin-top: 43.48rpx;
}

.ml-26 {
  margin-left: 47.1rpx;
}

.mt-26 {
  margin-top: 47.1rpx;
}

.ml-28 {
  margin-left: 50.72rpx;
}

.mt-28 {
  margin-top: 50.72rpx;
}

.ml-30 {
  margin-left: 54.35rpx;
}

.mt-30 {
  margin-top: 54.35rpx;
}

.ml-32 {
  margin-left: 57.97rpx;
}

.mt-32 {
  margin-top: 57.97rpx;
}

.ml-34 {
  margin-left: 61.59rpx;
}

.mt-34 {
  margin-top: 61.59rpx;
}

.ml-36 {
  margin-left: 65.22rpx;
}

.mt-36 {
  margin-top: 65.22rpx;
}

.ml-38 {
  margin-left: 68.84rpx;
}

.mt-38 {
  margin-top: 68.84rpx;
}

.ml-40 {
  margin-left: 72.46rpx;
}

.mt-40 {
  margin-top: 72.46rpx;
}

.ml-42 {
  margin-left: 76.09rpx;
}

.mt-42 {
  margin-top: 76.09rpx;
}

.ml-44 {
  margin-left: 79.71rpx;
}

.mt-44 {
  margin-top: 79.71rpx;
}

.ml-46 {
  margin-left: 83.33rpx;
}

.mt-46 {
  margin-top: 83.33rpx;
}

.ml-48 {
  margin-left: 86.96rpx;
}

.mt-48 {
  margin-top: 86.96rpx;
}

.ml-50 {
  margin-left: 90.58rpx;
}

.mt-50 {
  margin-top: 90.58rpx;
}

.ml-52 {
  margin-left: 94.2rpx;
}

.mt-52 {
  margin-top: 94.2rpx;
}

.ml-54 {
  margin-left: 97.83rpx;
}

.mt-54 {
  margin-top: 97.83rpx;
}

.ml-56 {
  margin-left: 101.45rpx;
}

.mt-56 {
  margin-top: 101.45rpx;
}

.ml-58 {
  margin-left: 105.07rpx;
}

.mt-58 {
  margin-top: 105.07rpx;
}

.ml-60 {
  margin-left: 108.7rpx;
}

.mt-60 {
  margin-top: 108.7rpx;
}

.ml-62 {
  margin-left: 112.32rpx;
}

.mt-62 {
  margin-top: 112.32rpx;
}

.ml-64 {
  margin-left: 115.94rpx;
}

.mt-64 {
  margin-top: 115.94rpx;
}

.ml-66 {
  margin-left: 119.57rpx;
}

.mt-66 {
  margin-top: 119.57rpx;
}

.ml-68 {
  margin-left: 123.19rpx;
}

.mt-68 {
  margin-top: 123.19rpx;
}

.ml-70 {
  margin-left: 126.81rpx;
}

.mt-70 {
  margin-top: 126.81rpx;
}

.ml-72 {
  margin-left: 130.43rpx;
}

.mt-72 {
  margin-top: 130.43rpx;
}

.ml-74 {
  margin-left: 134.06rpx;
}

.mt-74 {
  margin-top: 134.06rpx;
}

.ml-76 {
  margin-left: 137.68rpx;
}

.mt-76 {
  margin-top: 137.68rpx;
}

.ml-78 {
  margin-left: 141.3rpx;
}

.mt-78 {
  margin-top: 141.3rpx;
}

.ml-80 {
  margin-left: 144.93rpx;
}

.mt-80 {
  margin-top: 144.93rpx;
}

.ml-82 {
  margin-left: 148.55rpx;
}

.mt-82 {
  margin-top: 148.55rpx;
}

.ml-84 {
  margin-left: 152.17rpx;
}

.mt-84 {
  margin-top: 152.17rpx;
}

.ml-86 {
  margin-left: 155.8rpx;
}

.mt-86 {
  margin-top: 155.8rpx;
}

.ml-88 {
  margin-left: 159.42rpx;
}

.mt-88 {
  margin-top: 159.42rpx;
}

.ml-90 {
  margin-left: 163.04rpx;
}

.mt-90 {
  margin-top: 163.04rpx;
}

.ml-92 {
  margin-left: 166.67rpx;
}

.mt-92 {
  margin-top: 166.67rpx;
}

.ml-94 {
  margin-left: 170.29rpx;
}

.mt-94 {
  margin-top: 170.29rpx;
}

.ml-96 {
  margin-left: 173.91rpx;
}

.mt-96 {
  margin-top: 173.91rpx;
}

.ml-98 {
  margin-left: 177.54rpx;
}

.mt-98 {
  margin-top: 177.54rpx;
}

.ml-100 {
  margin-left: 181.16rpx;
}

.mt-100 {
  margin-top: 181.16rpx;
}
</style>
